<template>
	<div class="login">
		<div class="denglu">
			<div class="biaoshi">
				手机登录
			</div>
			<div class="dianhua">
				<i class="el-icon-mobile-phone"></i>
				<input type="text" v-model="input1" placeholder="请输入电话" />
			</div>
			<div class="mima">
				<i class="el-icon-lock"></i>
				<input type="password" v-model="input2" placeholder="请输入密码" />
			</div>
			<div class="yanzhengma">
				<input type="text" v-model="input3" />
				<button @click="yan" :disabled="jinzhi" class="yanma">{{yanzheng}}</button>
			</div>
			<div class="deng">
				<span @click="login">登录</span>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import Router from 'vue-router'
	export default{
		name:"login",
		data(){
			return{
				input1:'',
				input2:'',
				input3:'',
				cookie:'豆子',
				cunlu:'',
				jishi:'',
				jinzhi:false,
				
				shu:60,
				yanzheng:'获取验证码'
			}
		},
		created(){
			//当第一次进来，vuex中的luyoushu为null就默认为0
			if(this.$store.state.luyoushu=="null"){
				this.$store.state.luyoushu=0;
			}
		},
		mounted(){
			console.log(this.$store.state.luyoushu)
			this.cunlu=this.$store.state.luyoushu;
			//存储路由id
			this.$store.commit("cunluyou",this.cunlu)
			
		},
		methods:{
			//点击获取验证码时间的减少
			yan(){
				if(this.shu>0){
					this.jinzhi=true;
					this.shu--;
					this.yanzheng=this.shu+'s';
					this.jishi=setTimeout(this.yan,1000)
				}else if(this.shu<=0){
					this.yanzheng="获取验证码";
					this.shu=60;
					this.jinzhi=false;
					clearInterval(this.jishi)
				}
			},
			login(){
				axios.post("/index/login/login",{
					phone:this.input1,
					pass:this.input2,
					type:"phonelogin"
				}).then((res)=>{
					
					if(res.data.code==1){
						//加载登录的转圈显示
						const loading = this.$loading({
						  lock: true,
						  text: '登录中......',
						  spinner: 'el-icon-loading',
						  background: 'rgba(0, 0, 0, 0.7)'
						});
						setTimeout(() => {
						  loading.close();
						  this.$store.commit("loginYes",res.data.data)
						  //跳转页面
						  this.$router.push('/home/'+this.cunlu+'/gongzuotai')
						  
						}, 2000);
					}else{
						this.$message.error(res.data.msg)
					}
				})
				.catch((error)=>{
				  this.$message.error(error,"登录出错啦")
				})
				
				// this.$loading();//加载，转圈
				// this.$message.success("登录错误");//提示信息
				
				// location.reload()//刷新页面
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.login{
		padding-top:5rem ;
		.denglu{
			border-radius: 0.1rem;
			width: 24%;
			margin: auto;
			border: 1px solid #DCDFE6;
			padding: 0.8rem;
			box-sizing: border-box;
			
			.biaoshi{
				font-size: 0.4rem;
				text-align: center;
				color: #666;
				padding: 0 0 0.6rem 0;
			}
			
			.dianhua{
				border:1px solid #DCDFE6 ;
				color: #969BAC;
				font-size: 0.4rem;
				border-radius:0.1rem ;
				display: flex;
				
				i{
					padding: 0.4rem;
					background-color: #F5F7FA;
					border-right:1px solid #DCDFE6 ;
				}
				
				input{
					border: none;
					width: 80%;
					outline: none;
					padding: 0.3rem 0;
					font-size: 0.4rem;
					margin-left:0.4rem ;
					letter-spacing: 0.02rem;
				}
				input::placeholder{
					color: #C0C4CC;
					font-size: 0.35rem;
				}
			}
			.mima{
				border:1px solid #DCDFE6 ;
				color: #969BAC;
				font-size: 0.4rem;
				border-radius:0.1rem ;
				margin-top:0.4rem ;
				display: flex;
				
				i{
					padding: 0.4rem;
					background-color: #F5F7FA;
					border-right:1px solid #DCDFE6 ;
				}
				
				input{
					border: none;
					width: 80%;
					outline: none;
					padding: 0.3rem 0;
					font-size: 0.4rem;
					margin-left:0.4rem ;
					letter-spacing: 0.02rem;
				}
				input::placeholder{
					color: #C0C4CC;
					font-size: 0.35rem;
				}
			}
			
			.yanzhengma{
				border:1px solid #DCDFE6 ;
				border-radius:0.1rem ;
				display: flex;
				align-items: center;
				margin-top:0.5rem ;
				padding: 0.15rem 0;
				
				input{
					border-top-left-radius:0.1rem ;
					border-bottom-left-radius:0.1rem ;
					width: 68%;
					outline: none;
					height: 0.4rem;
					border: none;
					padding-left:0.3rem ;
					box-sizing: border-box;
					font-size: 0.35rem;
				}
				button{
					border: none;
					border-left:1px solid #BABABA ;
					cursor: pointer;
					display: block;
					outline: none;
					font-size: 0.35rem;
					text-align: center;
					padding: 0.15rem;
					width: 32%;
					color: #EF8466;
					background-color: #fff;
				}
			}
			
			.deng{
				span{
					display: block;
					background-color: #00A2FF;
					border-radius:0.1rem ;
					color: #fff;
					text-align: center;
					font-size: 0.4rem;
					width: 80%;
					margin: auto;
					cursor: pointer;
					padding: 0.2rem;
					letter-spacing: 0.1rem;
					margin-top:0.8rem ;
					box-shadow: 0 0 0.2rem rgba(0,0,0,0.2);
				}
			}
		}
	}
</style>
